<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>需求详情</title>
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/pensonal.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/coupon_total.css" />
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
<style>
     	.user-voucher span{
     		font-size: 14px;
            color: #C8C7CC;
     	}

     </style>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
    	<!--页面主结构结束-->
		<div id="customs-c" class="mui-page">
			 <input type="hidden" name="cuponsId" value="" id="cuponsId"/>
    		<input type="hidden" value="" id="cuponsMoney" name="money"/>
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>响应车队
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">预定价格</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
				<div class="customs-cost">
					<div class="cus-c-tit">
						<div class="cus-c-ico">
							<img src="${ctxStatic }/wx/images/yhq_wode@2x.png" />
						</div>
						<span>优惠券</span>
					</div>
					<div class="user-voucher">
						<a href="#coupon_total" class="mui-navigate-right" id="yhq">
								<span class="do_cou_txt">请选择优惠券</span>
								<span class="do_cou_ty"></span>
						</a>
					</div>
					<div class="cus-c-tit" style="margin-top: 15px;">
						<i class="mui-icon mui-icon-info"></i>
						<span>预订须知</span>
					</div>
					<div class="customs-txt">
					<div class="margs" style="width: 100%;float: left;">
        <div class="start">
            <p class="start-1">费用明细</p>

                <p>
                  【一价全包】全程司机代驾服务费、车辆使用费、车辆油电费、 空驶费、夜间服务费、司机小费、路桥费、 停车费、摆渡费。 费用不含：超时服务费（建议行车时间不超过12小时）、司机食宿费
                </p>

        </div>

<div>

    <p class="start-1">取消须知</p>
    <div class="mour">
      <p> ●该产品支持取消。</p>
      <p>●出行日期前72小时前取消，免收违约金；</p>
      <p>●出行日期前72小时至24小时取消，收取费用总额30%的违约金；</p>
      <p>●出行开始前24小时取消，收取费用总额50%的违约金；</p>
      <p>●超过发车时间不可退款。</p>
    </div>
   </div>
           <p class="start-1">
                重要提示
            </p>
            <div class="mour">
             <p> 1. 该产品为定制产品，请您尽快完成支付，以免客运公司取消报价。</p>
             <p>2. 如您的预订时间距离发车时间在12小时以内，为保证您的顺利出行，请保持您的电话畅通。</p>
             <p> 3. 司机食宿费一般由订车人安排，如不能安排，由司机向订车人收取相应的食宿补贴，标准为：住宿200元/晚、三餐80元/天。</p>
             <p>4. 如用车人临时更改行车路线，需与车队自行协商，产生的额外费用也由用车人自行承担；</p>
                <p>  5. 为了保证您的用车安全及良好体验，建议您每日用车时间不超过12小时。否则您需要向司机支付超时服务费。标准："${param.typename }： ${param.outtimefee }元/小时"</p>
                  <p>6. 如产生不含费用项请在服务结束后，将钱面付司机。严禁司机额外乱收费，如发现可联系霞客约车客服核实退还。</p>
                   <p>7. 开具发票:如需发票，由霞客约车根据订单金额统一开具。请在服务完成后至我的账户—关于发票—立即开票填写开票信息，开票总金 额为订单费用。</p>
            </div>
    

    </div>
					</div>
				</div>
			         </div>
					</div>
			</div>
			<nav class="mui-bar-tab mui-bar cus-c-bt">
				<div class="mui-col-xs-6 cus-c-total">
					<p>总额：￥<span id="total">${param.dueamount}</span></p>
				</div>
				<div class="mui-col-xs-6 cus-off-btn">
					<button id="subBtn">立即支付</button>
				</div>
			</nav>
		</div>
		<div id="coupon_total" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">选择优惠券</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="ul">
					</div>
				</div>
			</div>
		</div>
	</body>
		<script src="${ctxStatic }/mui/js/mui.min.js"></script>
		<script src="${ctxStatic }/wx/mui/js/mui.view.js "></script>
		<script type="text/javascript">
			mui.init();
			var viewApi = mui('#app').view({
				defaultPage: '#customs-c'
			});
			//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
			});
		})(mui);
			Zepto(function(){
				var totalprice = "${param.dueamount}";
			//获取优惠券
			$('#yhq').on('tap', function() {
				mui.post('${ctxFront}/mobile/canusecupons',{userId:'${sessionScope.front_user.id}',nowPrice:$('#suitrtnprice').text()},function(d){
					if(d.code=='200'){
						var sm = d.data.info;
						var x = Number(totalprice);
						var table = document.getElementById("ul");
						table.innerHTML = "";//清空数据
						for (var i=0;i<sm.length;i++) {
							if(x<Number(sm[i].minPrice)){
								continue;
							}
							var div = document.createElement("div");
							var dateStr = getLocalTime(sm[i].timeOver);
							div.className = "coupon_t_wrap";
							var str = "";
							if(i==0){
								str += "<div class='no_coupon mui-action-back'>";
								str	+= "	<button type='button'>不使用优惠券</button>";
								str	+= "</div>";
							}
							str += "<div class='do_coupon mui-action-back'>";
							str += "<div class='mui-row'>";
							str += "<div class='mui-col-xs-4 do_coupon_cost'>";
							if (sm[i].type=='0') {//满减
								str += "<span class='do_cou_ct'>￥"+sm[i].price+"</span>";
							} else{//折扣
								str += "<span class='do_cou_ct'>"+sm[i].price+"折</span>";
							}
							str += "<span style='display:none;' class='cuponsMoney'>"+sm[i].price+"</span>";
							str += "</div>";
							str += "<div class='mui-col-xs-8 do_coupon_txt'>";
							str += "<p class='do_cou_type'>"+sm[i].name+"</p>";
							str += "<input type='hidden' class='cuponsId' name='cuponsId' value='"+sm[i].cuponRecordId+"'>";
							str += "<p>"+sm[i].instruction+"</p>";
							str += "<p>有效期至："+dateStr+"</p>";
							str += "</div>";
							str += "</div>";
							str += "</div>";
							
							div.innerHTML = str;
	            			table.appendChild(div);
						}
						if (table.innerHTML=="") {
							mui.alert("暂无可用优惠券")
						}
			$('.no_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${param.dueamount}';
				$('.do_coupon').removeClass('do_coupon_gc')
				$('.do_cou_txt').text('请选择优惠券').css('color', '#C8C7CC');
				$('.do_cou_ty').text('');
				$('#total').text(suitrtnprice);
			})
			//优惠券
			$('.do_coupon').on('tap', function() {
				$('#cuponsId').val('');
				$('#cuponsMoney').val('');
				var suitrtnprice = '${param.dueamount}';
				$(this).addClass('do_coupon_gc').siblings('.do_coupon').removeClass('do_coupon_gc');
				//传值
				var costxt = $(this).find('.do_cou_ct').text();
				var costxt2 = $(this).find('.cuponsMoney').text();
				var costype = $(this).find('.do_cou_type').text();
				var cuponsId = $(this).find('.cuponsId').val();
				if(costxt.indexOf("折")>-1){
					$('.do_cou_txt').text(costxt).css('color', 'red');
				}else{
					$('.do_cou_txt').text('-' + costxt).css('color', 'red');
				}
				if(costxt2<10){  //代表打折券
					suitrtnprice = Math.round(suitrtnprice * (costxt2/10));
					costxt2 = totalprice - suitrtnprice;
				}else{//满减券
					suitrtnprice = suitrtnprice - costxt2;
				}
				//清空优惠券信息
				$('.do_cou_ty').text(costype);
				$('#cuponsId').val(cuponsId);
				$('#cuponsMoney').val(costxt2);
				$('#total').text(suitrtnprice);
			})
					}else{
						mui.alert("暂无可用优惠券");
					}
				});
			});
				$('#subBtn').on('tap', function() {
					var cuponsId = $('#cuponsId').val();
					var money = $('#cuponsMoney').val();
					mui.post('${ctxFront}/mobile/submitDemandOrder',{
						reactid:'${param.reactid}',
						demandid:'${param.demandid}',
						ordername:'${param.ordername}',
						dueamount:'${param.dueamount}',
						cuponsId: cuponsId,
						money: money,
						ordertype:'c',
						bookingdays:'${param.bookingdays}',
						realscheid:'${param.reactid}',
						vehiclenum:'${param.vehiclenum}',
						contacts:'${param.contacts}',
						payertel:'${param.payertel}',
						remarks:'${param.remarks}',
						cargotypeid:'${param.cargotypeid}',
						'office.id':'${param.office.id}',
						boardaddr:'${param.boardaddr}',
						departdateStr:'${param.departdateStr}',
						userid:'${sessionScope.front_user.id}'
					},function(d){
						if(d.code=='200'){
							var orderid = d.data.orders.orderid;
							window.location.href = "${ctxWx}/pu/pay/payWay?orderid="+orderid;
						}else{
							mui.alert(d.message)
						}
					},"json");
				});
						//时间戳转时间格式
	function getLocalTime(nS) {  
		var date = new Date();  
	    date.setTime(nS);  
	    var y = date.getFullYear();      
	    var m = date.getMonth() + 1;      
	    m = m < 10 ? ('0' + m) : m;      
	    var d = date.getDate();      
	    d = d < 10 ? ('0' + d) : d;      
	    var h = date.getHours();    
	    h = h < 10 ? ('0' + h) : h;    
	    var minute = date.getMinutes();    
	    var second = date.getSeconds();    
	    minute = minute < 10 ? ('0' + minute) : minute;      
	    second = second < 10 ? ('0' + second) : second;     
	    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;      
	};
			})
		</script>
</html>